<template>
  <div>
    <myDivider name="车辆信息"></myDivider>
    <div class="Top">
      <el-input style="width: 180px;" v-model="keyResidentialName" placeholder="根据小区名称搜索"
        @keyup.enter.native="getTableList" clearable></el-input>

      <el-select style="width: 110px" v-model="keyType" placeholder="请选择搜索类型">
        <el-option label="车牌号" value="licensePlateNumber"></el-option>
        <el-option label="车主" value="name"></el-option>
        <el-option label="手机号码" value="phoneNumber"></el-option>
      </el-select>
      <el-input style="width: 170px;margin-left: -5px;" v-model="keyWords" placeholder="根据关键词搜索"
        @keyup.enter.native="getTableList" clearable></el-input>


      <el-select style="width: 150px" @change="SouSuo" clearable v-model="keyState" placeholder="请选择状态">
        <el-option label="禁用" value="0"></el-option>
        <el-option label="正常" value="1"></el-option>
      </el-select>

      <el-date-picker @change="SouSuo" style="width: 250px;" value-format="yyyy-MM-dd" v-model="keyTime"
        type="daterange" range-separator=" " start-placeholder="登记时间" end-placeholder="请选择时间段">
      </el-date-picker>

      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo">查询</el-button>
      <el-button style="margin-top: 20px; margin-left: 15px" @click="reset">重置</el-button>
    </div>

    <el-table class="tableBox" :data="TableData" style="width: 100%">

      <el-table-column fixed="left" align="center" prop="name" label="车辆照片" width="100px">
        <template slot-scope="scope">
          <el-image style="width: 80px; height: 60px" :src="scope.row.carImageUrl"
            :preview-src-list="[...scope.row.carImageUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="left" align="center" prop="licensePlateNumber" label="车牌号" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="residentialName" label="小区名称" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="brandModel" label="品牌型号" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="carType" label="车型" width="200px">
      </el-table-column>
      <el-table-column align="center" prop="carColor" label="车辆颜色" width="120px">
      </el-table-column>
      <el-table-column align="center" prop="ownerName" label="车主姓名" width="120px">
      </el-table-column>
      <el-table-column align="center" prop="phoneNumber" label="手机号码" width="150px">
      </el-table-column>
      <el-table-column align="center" prop="code" label="默认车位号" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="80px">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;justify-content: space-evenly">
            <div style="width: 10px;height: 10px;border-radius: 100px;"
              :style="{ backgroundColor: scope.row.status == 1 ? '#4095e5' : '#bd3124' }"></div>
            <span>{{ scope.row.status == 1 ? '正常' : '禁用' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reason" label="禁用原因">
        <template slot-scope="scope">
          {{ scope.row.reason ? scope.row.reason : '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operatorName" label="禁用操作人" width="200px">
        <template slot-scope="scope">
          {{ scope.row.operatorName ? scope.row.operatorName : '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operationTime" label="手动禁用时间" width="200px">
        <template slot-scope="scope">
          {{ scope.row.operationTime ? scope.row.operationTime : '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <div class="textBtn">
            <el-row>
              <el-col class="el" :span="12">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="disableEnableClick(scope.row)">{{
        scope.row.manualStatus == 1 ? '禁用' : '启用' }}</span>
              </el-col>
              <el-col class="el" :span="12">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                  @click="unbuildClick(scope.row)">解绑</span>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
    </el-table>





    <!-- 禁用车辆弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="450px" title="禁用车辆" :visible.sync="popShow">
      <el-divider></el-divider>

      <el-form :model="insertForm" :rules="insertRules" ref="insertForm" label-width="120px">
        <el-form-item label="禁用原因:" prop="notes">
          <el-input type="textarea" :rows="5" maxlength="200" show-word-limit :placeholder="`禁用原因`"
            v-model="insertForm.notes">
          </el-input>
        </el-form-item>
      </el-form>

      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="popShow = false">取 消</el-button>
        <el-button type="primary" @click="popOk">确
          定</el-button>
      </div>
    </el-dialog>

    <!-- 解绑车辆弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="450px" :title="`解绑车辆`"
      :visible.sync="unbindPopShow">
      <el-divider></el-divider>
      <el-table :data="unbindPopTableData" style="width: 100%">
        <el-table-column align="center" prop="code" label="车位号">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="24">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="unbuildOk(scope.row)">解绑</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <el-divider></el-divider>
    </el-dialog>
    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>





<script>
export default {
  data() {
    return {
      // 顶部筛选 ===================
      keyResidentialName: '',
      keyType: 'licensePlateNumber',
      keyWords: '',
      keyState: '',
      keyTime: ['', ''],
      //===================  顶部筛选 

      // 主要表格==================
      TableData: [], //用户数据
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // ==================主要表格

      insertForm: {},
      insertRules: {
        notes: [
          { required: true, message: '请输入禁用原因', trigger: 'blur' },
        ]
      },
      popShow: false,
      activatedRow: {},

      //解绑车辆=======================
      unbindPopShow: false,
      unbindPopTableData: [],
      //解绑车辆=======================
    };
  },
  async activated() {
    this.reset() // 重置清空 然后查询列表
  },
  methods: {
    popOk() {
      this.$refs['insertForm'].validate((valid) => {
        if (valid) {
          this.$confirm(`此操作将会禁用该车辆，是否继续？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {

            let res = await this.$api.car.myManualOperation({
              "carId": this.activatedRow.carId, //车辆id 必填
              "residentialId": this.activatedRow.residentialId, //小区id 必填
              "manualStatus": 0, // 0禁用 1启用 必填
              "reason": this.insertForm.notes //禁用原因
            })
            if (res.code == 200) {
              this.popShow = false
              this.getTableList()
              this.$message({
                type: 'success',
                message: `禁用成功!`
              });
            } else {
              this.$message.error(res.message)
            }

          })
        }
      });
    },
    // 主要按钮 ===============================================================
    async disableEnableClick(row) {
      console.log('禁用点击了', row);
      this.activatedRow = row
      if (row.manualStatus == 1) { //如果当前是启用状态，那么就需要打开禁用弹窗去禁用
        this.popShow = true
        this.$set(this.insertForm, 'notes', '')
        this.$nextTick(() => {
          this.$refs.insertForm.clearValidate()
        })
      } else if (row.manualStatus == 0) {//如果是禁用状态，那么直接启用
        this.$confirm(`是否启用该车辆？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await this.$api.car.myManualOperation({
            "carId": this.activatedRow.carId, //车辆id 必填
            "residentialId": this.activatedRow.residentialId, //小区id 必填
            "manualStatus": 1, // 0禁用 1启用 必填
            "reason": ''
          })
          if (res.code == 200) {
            this.getTableList()
            this.$message({
              type: 'success',
              message: `启用成功!`
            });
          } else {
            this.$message.error(res.message)
          }

        })
      }

    },
    unbuildClick(row) {
      this.activatedRow = row
      console.log(row, '点击主列表的解绑按钮');
      this.unbindPopShow = true
      this.getUnbindCarSpaceList()
    },
    async getUnbindCarSpaceList() {
      let res = await this.$api.car.myGetSpaceListByParam(this.activatedRow.carId, this.activatedRow.residentialId)
      console.log(res, '列表');
      if (res.code == 200) {
        this.unbindPopTableData = res.data
       
      } else {
        this.$message.error(res.message)
      }
    },
    unbuildOk(row) {
      this.$confirm(`此操作将会解绑该车辆，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.car.myUnbindSpaceAndCar(this.activatedRow.carId, row.spaceId)
        console.log(res, 'qwdqwd');
        if (res.code == 200) {
          this.getUnbindCarSpaceList()
          this.$message({
            type: 'success',
            message: `解绑成功!`
          });
          this.unbindPopShow = false
          this.getTableList()
        } else {
          this.$message.error(res.message)
        }

      })
    },
    //======================================================================主要按钮

    // 列表 =====================================================================
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.pageNum = 1
      this.keyResidentialName = ''
      this.keyType = 'licensePlateNumber'
      this.keyWords = ''
      this.keyState = ''
      this.keyTime = ['', '']
      this.getTableList()
    },
    //按条件查询菜单列表
    async getTableList() {
      if (!this.keyTime) { this.keyTime = ['', ''] }
      let res = await this.$api.car.myGetResidentialCarList({
        "residentialName": this.keyResidentialName, //小区名
        "statusParam": this.keyState, //0禁用  1正常
        "start": this.keyTime[0], //开始时间
        "end": this.keyTime[1], //结束时间
        "type": this.keyType, //参数种类, licensePlateNumber车牌号 name车主名 phoneNumber手机号
        "keywords": this.keyWords, //参数
        "pageNum": this.pageNum,
        "pageSize": this.pageSize
      })
      if (res.code == 200) {
        if (res.data.list.length == 0 && this.pageNum != 1) {
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.TableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message)
      }

    },
    // ======================================================================列表

  },


};
</script>
<style scoped lang="less">
.tableBox {
  margin-top: 100px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #fafafa;
      }
    }
  }
}

.popTableStyle {
  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #efefef;
      }
    }

    .el-table__body tr.current-row>td.el-table__cell {
      background-color: #409eff;

      .cell {
        color: white;
        font-weight: 600;
      }
    }
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {

      // border-left: 1px solid #aaa;
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}



.Top {
  position: relative;

  .operation {
    position: absolute;
    left: 0;
    top: 68px;
  }
}
</style>